<template>
  <div class="goods">
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            class="inget-with-select"
            v-model.trim="pageObj.query"
            clearable
            @clear="getSearch"
            @blur="getSearch"
            @keydown.native.enter="getSearch"
          >
            <el-button
              @click="getSearch"
              slot="append"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="addGoods">添加商品</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="goodsList"
        max-height="600px"
        border
        style="width: 100%; margin: 10px 0"
      >
        <el-table-column label="#" type="index"> </el-table-column>
        <el-table-column prop="goods_name" label="商品名称"> </el-table-column>
        <el-table-column prop="goods_price" label="商品价格（元）">
        </el-table-column>
        <el-table-column prop="goods_weight" label="商品重量">
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.add_time | getDate }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              @click="showEdit(scope.row)"
              size="mini"
              type="primary"
              icon="el-icon-edit"
              >编辑</el-button
            >
            <el-button
              @click="delGoods(scope.row)"
              size="mini"
              type="danger"
              icon="el-icon-delete"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageObj.pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 编辑商品 -->
    <el-dialog title="编辑商品" :visible.sync="editGoodsFormVisible">
      <el-form ref="editForm" :model="editForm" :rules="rules">
        <el-form-item
          prop="goods_name"
          label="商品名称"
          :label-width="formLabelWidth"
        >
          <el-input v-model="editForm.goods_name"></el-input>
        </el-form-item>

        <el-form-item
          prop="goods_price"
          label="商品价格"
          :label-width="formLabelWidth"
        >
          <el-input v-model="editForm.goods_price"></el-input>
        </el-form-item>

        <el-form-item
          prop="goods_number"
          label="商品数量"
          :label-width="formLabelWidth"
        >
          <el-input v-model="editForm.goods_number"></el-input>
        </el-form-item>

        <el-form-item
          prop="goods_weight"
          label="分类列表"
          :label-width="formLabelWidth"
        >
          <el-input v-model="editForm.goods_weight"></el-input>
        </el-form-item>

        <el-form-item
          prop="goods_weight"
          label="商品重量"
          :label-width="formLabelWidth"
        >
          <el-input v-model="editForm.goods_weight"></el-input>
        </el-form-item>
        <el-form-item
          prop="goods_introduce"
          label="商品介绍"
          :label-width="formLabelWidth"
        >
          <el-input v-model="editForm.goods_introduce"></el-input>
        </el-form-item>
        <el-form-item
          prop="pics"
          label="商品图片"
          :label-width="formLabelWidth"
        >
          <el-input v-model="editForm.pics"></el-input>
        </el-form-item>
        <el-form-item
          prop="attrs"
          label="商品参数"
          :label-width="formLabelWidth"
        >
          <el-input v-model="editForm.attrs"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editGoodsFormVisible = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getGoods, getDelGoods } from "@/api/index";
export default {
  data() {
    return {
      goodsList: [],
      total: 0,
      pageObj: {
        query: "",
        pagenum: 1,
        pagesize: 5,
      },
      formLabelWidth: "120px",
      editForm: {
        goods_id: "",
        goods_name: "",
        goods_price: "",
        goods_number: "",
        goods_cat: "",
        goods_weight: "",
        goods_introduce: "",
        pics: "",
        attrs: "",
      },
      rules: {
        goods_name: [
          { required: true, message: "请输入商品名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
        ],
        goods_price: [
          { required: true, message: "请输入价格", trigger: "blur" },
          {
            min: 1,
            trigger: "blur",
          },
        ],
        goods_number: [
          { required: true, message: "请输入数量", trigger: "blur" },
          {
            min: 1,
            trigger: "blur",
          },
        ],
        goods_cat: [
          { required: true, message: "请输入分类", trigger: "blur" },
          {
            min: 1,
            trigger: "blur",
          },
        ],
        goods_weight: [
          { required: true, message: "请输入重量", trigger: "blur" },
          {
            min: 1,
            trigger: "blur",
          },
        ],
      },
      addGoodsFormVisible: false,
      editGoodsFormVisible: false,
    };
  },
  created() {
    this.getGoodData();
  },
  methods: {
    // 编辑商品弹出框
    showEdit(form) {
      console.log(form);
      this.editGoodsFormVisible = true;
    },
    // 增加商品
    addGoods() {
      this.$router.push({ name: "addGoods" });
    },
    //删除商品
    async delGoods(form) {
      let res = await this.$confirm("此操作将删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch(() => {});
      if (!res) return this.$message("取消删除");
      let {
        meta: { msg, status },
      } = await getDelGoods(form.goods_id);
      status == 200 ? this.$message.success(msg) : this.$message.error(msg);
      this.getGoodData();
    },
    // 搜索
    getSearch() {},
    // 分页
    handleSizeChange(val) {
      this.total = val;
      this.getGoodData();
    },
    handleCurrentChange(val) {
      this.pageObj.pagenum = val;
      this.getGoodData();
    },
    // 获取商品数据
    async getGoodData() {
      let {
        data: { goods, pagenum, total },
        meta: { msg, status },
      } = await getGoods(this.pageObj);
      if (status != 200) return this.$message.error(msg);
      this.goodsList = goods;
      this.pageObj.pagenum = +pagenum;
      this.total = total;
    },
  },
  filters: {

  },
};
</script>